<script setup lang="ts">
import type { Props } from './utils/types'

withDefaults(defineProps<Props>(), {
    title: '标题',
    englishTitle: 'english title',
})

</script>

<template>
    <div class="center-title">
        <h1>
            <span>
                {{ title }}
            </span>
        </h1>
        <p>{{ englishTitle }}</p>
    </div>
</template>

<style lang="scss" scoped>
.center-title {
    margin: 50px 0;

    h1,
    p {
        text-align: center;
    }

    p {
        color: rgba(154, 154, 154, 1);
        font-size: 18px;
        line-height: 26px;
    }

    h1 {
        color: var(--primary-color);
        font-size: 36px;
        line-height: 52px;

        span {
            position: relative;

            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 150px;
                height: 1px;
                background-color: #BBBBBB;
                top: 35px;
            }

            &::before {
                right: 140%;
            }

            &::after {
                left: 140%;
            }
        }
    }
}
</style>
